<template>
    <div id="tmpl">
      <div id="postcomment">
           <h3>提交评论</h3>
           <hr>
           <textarea v-model="comments"  placeholder="请输入您要评论的内容"></textarea>
           <mt-button type="primary" size="large" @click="postcomment">发表评论</mt-button>
      </div>
      <div id="list" >
          <h3>评论列表</h3>
          <hr>
          <div  v-for="(item,index) in list">
            <div class="title">
              <span>第{{index+1}}楼：</span>
              <span>用户:{{item.user_name}}</span>
              <span>发表时间{{item.add_time |datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
              </div>
              <ul class="mui-table-view">
                <li class="mui-table-view-cell" v-text="item.content"></li>
              </ul>
              
            </div>  
      </div>
      <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
    </div>
</template>
    
<script>

import common from '../kits/common.js';
import {Toast} from 'mint-ui';
export default {
  data(){
    return{
      comments :'',
      index:1,
      list:[],
      pageindex:1
      
    }
  },
  created(){
    this.getcommentlist(this.pageindex);
  },
  props:['id'] ,//作用是用来接收父组件传过来的值
  methods:{
    postcomment(){
      if(this.comments.trim().length<=0){
        Toast('请输入您要评论的内容');
        return;
      }
      var url =common.apidomain+'/api/postcomment/'+this.id;
      console.log(url)
      this.$http.post(url,{content:this.comments},{emulateJSON:true}).then(function(res){
          Toast(res.body.message);
          this.list.unshift({
        'user_name':'匿名用户',
        'add_time':new Date(),
        'content':this.comments
      })
      this.comments = '';
      });
     
    
      
    },
    getcommentlist(pageindex){
      pageindex = this.pageindex || 1; 
      this.$http.get(common.apidomain+'/api/getcomments/'+this.id+'?pageindex='+pageindex).then(function(res){
        if(res.body.status != 0){
          Toast(res.body.message);
          return;
        }
        // this.list =this.list.concat( res.body.message);
        this.list.push.apply(this.list , res.body.message);
      })
    },
    getmore(){
      this.pageindex++;
      this.getcommentlist(this.pageindex);
    }

  }
}
</script>

<style scoped>
  #postcomment{
    padding: 5px;
  }
hr{
    color: rgba(0,0,0,0.4);
  }
  #postcomment textarea{
    font-size: 16px;
  }
  #list{
   
   padding: 10px;
  }
  .title{
    padding: 5px;
     background-color:rgba(0,0,0,0.2);
     
    color: #6d6d6d;
    font-size: 15px;
  }
 
</style>
